<template>
  <PerfectTableComponent
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :removeQueryField="removeQueryField"
    :clearQuery="clearQuery"
    v-model:query="query"
    title="生产过程审核日志"
    ref="tableRef"
    :queryFormHeaders="queryFormHeaders"
    :table="table"
    :tableColumns="tableColumns"
    :allowEditTableCell="false"
    :showTableIndex="false"
    :showOperatorColumn="false"
    :showDeleteButton="false"
    :showAddNewButton="false"
    :baseUrl="urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDERSTEPAUDITLOG"
    v-model:form="form"
    :formHeader="formHeader"
  >
    <!-----------------------------表格查询表单自定义元素----------------------------------------->
    <template #query_form_warehouseIdOfSource>
      <WmsWarehouseCascadeSelectComponent
        ref="wmsWarehouseCascadeSelectQueryComponentRef1"
        v-model:warehouseId="query['warehouseSeatOfSource.warehouseArea.warehouse.id']"
        v-model:warehouseAreaId="query['warehouseSeatOfSource.warehouseArea.id']"
        v-model:warehouseSeatId="query['warehouseSeatOfSource.id']"
      />
    </template>
    <template #query_form_warehouseIdOfTarget>
      <WmsWarehouseCascadeSelectComponent
        ref="wmsWarehouseCascadeSelectQueryComponentRef2"
        v-model:warehouseId="query['warehouseSeatOfTarget.warehouseArea.warehouse.id']"
        v-model:warehouseAreaId="query['warehouseSeatOfTarget.warehouseArea.id']"
        v-model:warehouseSeatId="query['warehouseSeatOfTarget.id']"
      />
    </template>
    <!-----------------------------表格自定义列----------------------------------------->
    <!--所属栏目1-->
    <!-- <template #table_column_materialName="scope: any">
      {{ scope.row.materialBatch != null ? scope.row.materialBatch.material.name : '' }}
    </template> -->
  </PerfectTableComponent>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import { onMounted, provide, reactive, ref } from 'vue';
import useTableList from '@/api/hooks/useTableList';
import type { FormHeader, ResponseData, TableColumn } from '@/types/interface/base_interface';
import urls from '@/api/request/urls';
import { getDict } from '@/api/dict';
import type { Warehouse } from '@/types/interface/wms_interface';
import Request from '@/api/request/request';
import { useRouter } from 'vue-router';
// 导入路由
const router = useRouter(); // 创建路由对象

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDERSTEPAUDITLOG
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([]);

//表格==========================================================
// 表格插件ref对象1
const tableRef = ref();

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([]);

//表单==========================================================
//表单对象
const form = ref<Warehouse>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);

onMounted(async () => {
  //定义优先级选项。放在mounted中执行时，要将引用改变量的属性也放进来。
  const auditDict = await getDict('审核状态', 'boolean');
  queryFormHeaders.value = [
    // 查询表单
    {
      prop: 'productionOrder.id',
      label: '生产工单号',
      placeholder: '精确查询'
    },
    {
      prop: 'productionOrder.vin',
      label: 'VIN编码',
      placeholder: '精确查询'
    },
    {
      prop: 'productionOrder.carModelConfig.carModel.carBrand.id',
      label: '汽车品牌',
      type: 'selectRemote',
      width: '200px',
      url: urls.API_URL_BACKSTAGE_MES_CARBRAND,
      queryNameForUrl: 'name',
      config: {
        valueKey: 'id',
        defaultProp: {
          value: 'id',
          label: '{name}',
          labelRegexType: 2
          // label: '{material.name}（|批次号：{batchNumber}）'
          // label: 'material.name|batchNumber'
          // label: '物料：{material.name}'
        }
      }
    },
    {
      prop: 'productionOrder.carModelConfig.carModel.id',
      label: '车型',
      type: 'selectRemote',
      width: '200px',
      url: urls.API_URL_BACKSTAGE_MES_CARMODEL,
      queryNameForUrl: 'name',
      config: {
        valueKey: 'id',
        defaultProp: {
          value: 'id',
          label: '{name}',
          labelRegexType: 2
        }
      }
    },
    {
      prop: 'materialBatch.material.name',
      label: '物料名称'
    },
    {
      prop: 'materialBatch.id',
      label: '物料批次',
      type: 'selectRemote',
      width: '300px',
      url: urls.API_URL_BACKSTAGE_WMS_WMSMATERIALBATCH,
      queryNameForUrl: 'material.name',
      config: {
        valueKey: 'id',
        defaultProp: {
          value: 'id',
          label: '{material.name}（批次号：{batchNumber}）',
          labelRegexType: 2
          // label: '{material.name}（|批次号：{batchNumber}）'
          // label: 'material.name|batchNumber'
          // label: '物料：{material.name}'
        }
      }
    }
  ];
  //表格对象
  tableColumns.value = [
    {
      label: '品牌',
      prop: 'brandName',
      width: 120,
      fixed: true
    },
    {
      label: '车型名称',
      prop: 'modelName',
      width: 150,
      fixed: true
    },
    {
      label: '配置名称',
      prop: 'modelConfigName',
      width: 200,
      fixed: true
    },
    {
      label: '工单号',
      prop: 'orderNo',
      width: 100
    },
    {
      label: '车辆VIN',
      prop: 'vin',
      width: 100
    },
    {
      label: '生产步骤',
      prop: 'stepSort',
      width: 90
    },
    {
      label: '物料名',
      prop: 'materialName',
      width: 200
    },
    {
      label: '物料批次',
      prop: 'batchNumber',
      width: 100
    },
    {
      label: '计划数量',
      prop: 'planQuantity',
      width: 90
    },
    {
      label: '实际数量',
      prop: 'actualQuantity',
      width: 90
    },
    {
      label: '操作员',
      prop: 'operatorName',
      width: 150
    },
    {
      label: '开始时间',
      prop: 'startTime',
      width: 180
    },
    {
      label: '结束时间',
      prop: 'endTime',
      width: 180
    },
    {
      label: '审核员',
      prop: 'auditorName',
      width: 150
    },
    {
      label: '审核结果',
      prop: 'auditResult',
      width: 140,
      type: 'dict',
      dict: auditDict,
      config: {
        dictTag: {
          primary: [true],
          danger: [false]
        }
      }
    },
    {
      label: '审核意见',
      prop: 'auditNote',
      width: 150
    },
    {
      label: '审核时间',
      prop: 'createTime',
      width: 180
    }
  ];
});
</script>

<style scoped></style>
